<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:p="http://primefaces.prime.com.tr/ui"
	>
<h:head>
</h:head>

<h:body>
	<ui:composition template="/template/common/commonLayout.xhtml">
		<ui:define name="content">
			<h:outputStylesheet library="css" name="table-style.css" />
			<h:outputStylesheet library="css" name="outOfWork.css" />

			<h1 style="color: #709FB3;">Odsotnost iz dela</h1>

			<div id="outOfWork" class="outOfWork">
				<h:form>
					<p:messages id="messages" />
						<table class="formTable maxWidth">
							<tr class="formRow1">
								<td class="labelCell doctor">
									<h:outputText value="#{translatorService.translate('outOfWork.doctor')}" />
								</td>
								<td class="inputCell doctor">
									<h:selectOneMenu id="doctors" styleClass="fieldSelection" value="#{outOfWorkController.selectedDoctor}">
										<f:selectItems
											value="#{outOfWorkController.getDiscreteValueProvider().getDiscreteValueSet('Doctors')}" />
									</h:selectOneMenu>
								</td>
								<td class="labelCell typeOfFreeDay">
									<h:outputText value="#{translatorService.translate('outOfWork.typeOfFreeDay')}" />
								</td>
								<td class="inputCell typeOfFreeDay">
									<h:selectOneMenu id="outOfWork" styleClass="fieldSelection"
										value="#{outOfWorkController.selectedTypeOfFreeDay}">
										<f:selectItems
											value="#{outOfWorkController.getDiscreteValueProvider().getDiscreteValueSet('TypesOfFreeDay')}" />
									</h:selectOneMenu>
								</td>
								<td class="labelCell date">
									<h:outputText value="#{translatorService.translate('outOfWork.dateFrom')}" />
								</td>
								<td class="inputCell date">
									<p:calendar id="dateFrom" 
											value="#{outOfWorkController.dateFrom}"
											pattern="dd.MM.yyyy" 
											effect="slide"/>
								</td>
								<td class="labelCell date">
									<h:outputText value="#{translatorService.translate('outOfWork.dateTo')}" />
								</td>
								<td class="inputCell date">
									<p:calendar id="dateTo" 
												value="#{outOfWorkController.dateTo}"
												pattern="dd.MM.yyyy" 
												effect="slide"/>
								</td>
							</tr>
						</table>
						<p:spacer width="100%" height="20" />
						<div>
							<p:dataTable id="outOfWorkDatatable"
								value="#{outOfWorkController.freeDays}" var="freeDay"
								paginator="true"
								rows="10"
								>
								<p:column sortBy="#{outOfWorkController.getDiscreteValueProvider().getDiscreteValue('Doctors', freeDay.person.id)}">
									<f:facet name="header">
										<h:outputLabel value="#{translatorService.translate('outOfWork.doctor')}" />
									</f:facet>
									<h:outputText value="#{outOfWorkController.getDiscreteValueProvider().getDiscreteValue('Doctors', freeDay.person.id)}" />
								</p:column>
								<p:column sortBy="#{freeDay.outOfWork}">
									<f:facet name="header">
										<h:outputLabel value="#{translatorService.translate('outOfWork.typeOfFreeDay')}" />
									</f:facet>
									<h:outputText value="#{freeDay.outOfWork}" />
								</p:column>
								<p:column sortBy="#{outOfWorkController.sortByDate(freeDay.dateFrom)}">
						            <f:facet name="header">
						                <h:outputText value="#{translatorService.translate('outOfWork.dateFrom')}" />
						            </f:facet>
						            <h:outputText value="#{outOfWorkController.convertDate(freeDay.dateFrom)}"/>
						        </p:column>
						        <p:column sortBy="#{outOfWorkController.sortByDate(freeDay.dateTo)}">
						            <f:facet name="header">
						                <h:outputText value="#{translatorService.translate('outOfWork.dateTo')}" />
						            </f:facet>
						            <h:outputText value="#{outOfWorkController.convertDate(freeDay.dateTo)}"/>
						        </p:column>
							</p:dataTable>
						</div>
						<p:spacer width="100%" height="10"/>
						<p:commandButton value="Dodaj"
							actionListener="#{outOfWorkController.addFreeDays()}" 
							update="outOfWorkDatatable messages"/>
				</h:form>
			</div>
		</ui:define>
	</ui:composition>
</h:body>

</html>